<template>
    <view>
        <topHeader :isShowBack=true PageName="征信网点"></topHeader>
        <view class="container">
            <view class="top-main">
                <searchInput ref="searchInputRef" :lon="lon" :lat="lat" :current="current" @selectInfo="selectInfo"
                    @searchList="searchList" @resetList="resetList">
                </searchInput>
                <currentBanner @changeTab="changeTab" :currentIndex="current"></currentBanner>
            </view>
        </view>
        <view class="content-main" :style="{ marginTop: height + 'px' }">
            <reportAddress ref="reportAddressRef" :selectList="selectList" @getLon="getLon" :height="height"
                v-if="current == 0">
            </reportAddress>
            <bank ref="bankRef" :selectList="selectList" :height="height" v-if="current == 1"></bank>
        </view>
        <authorize @onLoadFun="onLoadFun" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
    </view>
</template>

<script>
import topHeader from '@/components/topHeader.vue'
import searchInput from './components/searchInput.vue';
import currentBanner from './components/currentBanner.vue';
import reportAddress from './components/reportAddress.vue';
import Authorize from "@/components/Authorize.vue";
import bank from './components/bank.vue';
import { mapGetters } from "vuex";
import residenceTime from "@/mixins/residenceTime";
export default {
    components: {
        topHeader,
        searchInput,
        currentBanner,
        reportAddress,
        bank,
        Authorize,
    },
    mixins: [residenceTime],
    data() {
        return {
            height: 0,
            current: 0,
            lon: '116.39746276232268',
            lat: '39.90878513802611',
            selectList: [],
            searchWord: '',
            isShowAuth: false,
        }
    },
    computed: mapGetters(["isLogin"]),
    onLoad() {
        this.$nextTick(() => {
            this.getContainerHeight();
        });
    },
    onShow() {
        uni.$on('updateAddress', (data) => {
            this.$nextTick(() => {
                this.$refs.reportAddressRef.updateAddress(data)
            })
            uni.$off('updateAddress');
        })
        uni.$on('getLocation', (data) => {
            this.$nextTick(() => {
                this.$refs.reportAddressRef.updateLocation(data)
            })
            uni.$off('getLocation');
        })
    },
    watch: {
        current: {
            handler(val) {
                this.$nextTick(() => {
                    const keyword = this.$refs.searchInputRef.searchValue;
                    if (this.current == 0) {
                        this.$refs.reportAddressRef.getLocation(keyword)
                    } else if (this.current == 1) {
                        this.$refs.bankRef.getList(keyword)
                    }
                });
            },
            immediate: true,
            deep: true
        }
    },
    async onPullDownRefresh() {
        uni.pageScrollTo({
            scrollTop: 0,
            duration: 0,
        });
        if (this.lon && this.lat) {
            this.searchList()
        }

        uni.stopPullDownRefresh();
    },
    methods: {
        pageViewTrack(stayTime) {
            const route = this.$util.getCurrentRoute()
            let params = {
                Um_Key_SourcePage: route.path,
                Um_Key_Duration: stayTime,
            }
            this.$umaTrack.pageViewTrack(params)
        },
        authColse() {
            this.isShowAuth = false;
        },
        onLoadFun() {
            this.isShowAuth = false;
            this.current = 1
        },
        searchList(val) {
            this.searchWord = val
            this.$nextTick(() => {
                if (this.current == 0) {
                    this.$refs.reportAddressRef.searchListByOutletsName(val)
                } else if (this.current == 1) {
                    this.$refs.bankRef.searchListByName(val)
                }
            });



        },
        resetList() {
            this.selectList = []
        },
        selectInfo(val) {
            this.selectList = val
        },
        getLon(res) {
            this.lon = res.longitude;
            this.lat = res.latitude;
        },
        changeTab(e) {
            if (e == 1 && !this.isLogin) {
                this.isShowAuth = true
            } else {
                this.current = e;
                this.selectList = []
            }

        },
        getContainerHeight() {
            let that = this;
            let info = uni.createSelectorQuery().select('.container');

            info.boundingClientRect(function (data) {
                console.log(data);
                // #ifdef MP-WEIXIN
                that.height = data.height
                // #endif
                // #ifdef H5
                that.height = data.height
                // #endif

                console.log("that.height", that.height)
            }).exec();
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
}

.top-main {
    width: 100%;
    background: #488AFD;
    /* #ifdef MP-WEIXIN */
    padding: 180rpx 30rpx 30rpx;
    /* #endif */
    /* #ifdef H5 */
    padding: 120rpx 30rpx 30rpx;

    /* #endif */
    .top-main-image {
        width: 100%;
        position: fixed;
        // background-color: pink;
        height: 200rpx;
        z-index: 11;
    }
}
</style>